<template>
  <div>
    <el-card class="header">
      <el-form
        :inline="true"
        @keyup.enter.native="getExportDispatchList()"
        class="dadeFrom"
      >
        <el-date-picker
          class="inputData"
          placeholder="选择日期"
          v-model="valuetimes"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          clearable
        >
        </el-date-picker>
        <el-select
          v-model="cityid"
          placeholder="选择分公司"
          clearable
          style="width: 200px"
          @change="chioce(cityid)"
          v-if="cityCode === '800'"
        >
          <el-option label="全部" value=""></el-option>
          <el-option
            v-for="option in cityList"
            :key="option.cityId"
            :label="option.cityName"
            :value="option.cityId"
          >
          </el-option>
        </el-select>
        选择场景：<el-select
          v-model="titleval"
          clearable
          style="width: 15.625rem"
          placeholder="选取推送场景"
          @change="changeTitleCon()"
        >
          <el-option
            :label="item.dictName"
            :value="item.dictValue"
            v-for="item in titleList"
            :key="item.id"
          ></el-option>
        </el-select>
        嘟一下任务名称：<el-input v-model="title" style="width: 15.625rem;" clearable placeholder="请输入嘟一下任务名称"></el-input>
        <el-button type="primary" @click="getpolling">查询</el-button>
        <el-button type="success" @click="exportGet()" :loading="isLoading">下载</el-button>
      </el-form>
    </el-card>
    <el-card style="margin-top: 10px">
      <el-table
        :data="dataList"
        style="width: 100%"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(12,42,98, 0.9)"
      >
        <el-table-column type="index" label="序号" align="center" width="60">
        </el-table-column>
        <el-table-column label="分公司" prop="cityName" align="center">
        </el-table-column>
        <el-table-column label="员工" prop="username" align="center">
        </el-table-column>
        <el-table-column label="嘟一下任务名称" prop="title" align="center">
        </el-table-column>
        <el-table-column
          label="建立时间"
          prop="createTime"
          align="center"
          width="200"
        >
        </el-table-column>
        <el-table-column label="发送类型" prop="sendStatus" align="center">
        </el-table-column>
        <el-table-column label="推送方式" prop="sendType" align="center">
        </el-table-column>
        <el-table-column label="发送规模" prop="pushCount" align="center">
        </el-table-column>
        <el-table-column label="响应规模" prop="readCount" align="center">
        </el-table-column>
        <el-table-column label="短信升级规模" prop="shortCount" align="center">
        </el-table-column>
        <el-table-column label="电话升级规模" prop="telCount" align="center">
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <Pagination
        :total="total"
        :pageNum="pageNum"
        :pageSize="pageSize"
        @pageChange="pageChange"
      />
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading:false,
      cityid: "",
      cityIdShow: true,
      valuetimes: "", //时间段，绑定的时间
      startTime: "", //开始时间
      endTime: "", //结束时间
      dataForm: {
        timeVal: "",
      },
      pageNum: 1,
      pageSize: 10,
      total: 0,
      dataList: [],
      cityList: [],
      titleList: [], //场景数据
      titleval: null,
      title:"",//嘟一下任务名称
      loading: true,
    };
  },
  created() {
    // this.fetchTableList();
    // this.getCityList();
    // this.fetchTitleList()
  },
  activated() {
    this.fetchTableList();
    this.getCityList();
    this.fetchTitleList();
  },
  computed: {
    cityCode: {
      get() {
        return this.$store.state.user.cityId;
      },
    },
  },
  methods: {
    // 获取地市数据
    getCityList() {
      this.$http({
        url: this.$http.adornUrl("/syscitydata/cityList"),
        method: "get",
        params: this.$http.adornParams({}),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log("city", data);
          this.cityList = data.list;
          // this.$store.commit('common/updateCityList', data.list)
          // this.cityList = data.page.list
          this.cityList.map((item) => {
            // console.log(item.cityId);
            // this.cityIdShow = item.cityId
            if (item.cityId === true) {
              this.cityIdShow = true;
            } else {
              this.cityIdShow = false;
            }
          });
        }
      });
    },
    chioce(item) {
      console.log(item);
      this.pageNum = 1;
    },
    // 获取表格数据
    fetchTableList() {
      let this_ = this;
      this.loading = true;
      console.log(this_.startTime, " this.startTime2");
      console.log(this_.endTime, " this.endTime2");
      this.$http({
        url: this.$http.adornUrl("/cpcplog/getLogTable3"),
        method: "get",
        params: this.$http.adornParams({
          page: this.pageNum,
          limit: this.pageSize,
          startTime: this_.startTime,
          endTime: this_.endTime,
          cityId: this.cityid,
          activityId: this.titleval,
          title:this.title
        }),
      }).then(({ data }) => {
        // console.log("data", data);
        if (data && data.code === 0) {
          // console.log("ssss", data.list.list);
          setTimeout(() => {
            this.loading = false;
            this.total = data.list.totalCount;
            this.dataList = data.list.list;
          }, 1000);
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    //  字典获取值
    fetchTitleList() {
      this.$http({
        url: this.$http.adornUrl("/sysdictdata/list"),
        method: "get",
        params: this.$http.adornParams({
          dictType: "du_text",
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.titleList = data.page.list;
        }
      });
    },
    changeTitleCon() {
      // const titleOrContent = this.titleval.split(",");
      console.log("this.titleval", this.titleval);
    },
    //格式化时间
    transformTimestamp(result) {
      const date = new Date(result);
      const Y = date.getFullYear() + "";
      const M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "";
      const D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + "";
      const dateString = Y + "-" + M + "-" + D;
      console.log("dateString", dateString); // > dateString 20200110
      return dateString;
    },
    //查询按钮
    getpolling() {
      // this.getDataList();
      this.pageNum = 1;
      if (!this.valuetimes == "") {
        var time1 = new Date(this.valuetimes[0]).getTime();
        var time2 = new Date(this.valuetimes[1]).getTime();
        const start = this.transformTimestamp(time1);
        const end = this.transformTimestamp(time2);
        this.startTime = start;
        this.endTime = end;
        console.log(this.startTime);
        console.log(this.endTime);
        this.fetchTableList();
      } else {
        // console.log("sdsss");
        this.startTime = "";
        this.endTime = "";
        // var myDate = new Date();
        // const Y = myDate.getFullYear() + "";
        // const M =
        //   (myDate.getMonth() + 1 < 10
        //     ? "0" + (myDate.getMonth() + 1)
        //     : myDate.getMonth() + 1) + "";
        // const C =
        //   (myDate.getDate() - 1 < 10
        //     ? "0" + myDate.getDate()
        //     : myDate.getDate()) + "";
        // // const D = C - 1;
        // const dateString = Y + "-" + M + "-" + C;
        // // const dateString1 = Y + "-" + M + "-" + C;
        // this.startTime = dateString;
        // this.endTime = dateString;
        // console.log(this.startTime, " this.startTime");
        // console.log(this.endTime, " this.endTime");
        this.fetchTableList();
      }
    },
    getFaSong(item) {
      let str = "";
      str = parseInt(item.basePushCount) + parseInt(item.upgradePushCount);
      return str;
    },
    getXiangYing(item) {
      let str = "";
      str = parseInt(item.baseReadCount) + parseInt(item.upgradeReadCount);
      return str;
    },
    //导出数据
    exportGet() {
      this.isLoading = true;
      this.$http({
        url: this.$http.adornUrl("cpcplog/downLogTable3"),
        method: "get",
        params: this.$http.adornParams({
          startTime: this.startTime,
          endTime: this.endTime,
          cityId: this.cityid,
          activityId:this.titleval,
          title:this.title
        }),
        responseType: "blob",
      }).then((res) => {
        console.log(res, "ddddddd");
        // return
        // if (res.status == 200) {
        //  if(this.code===500){
        //     this.fetchTableList()
        //     return
        //   }else{
        let blob = res.data;
        const fileReader = new FileReader(); // FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件的内容
        fileReader.readAsDataURL(blob); // 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容
        fileReader.onload = (event) => {
          // 处理load事件。该事件在读取操作完成时触发
          // 新建个下载的a标签，完成后移除。
          let a = document.createElement("a");
          let _fileName = "任务发送清单查询.xls";
          a.download = _fileName;
          a.href = event.target.result;
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
          this.isLoading = false;
        };
        // }
        // }
      });
    },
    // 分页
    pageChange(page) {
      console.log(page);
      this.pageSize = page._pageSize;
      this.pageNum = page._currentPage;
      console.log("this.pageSize", this.pageSize);
      console.log("this.pageNum", this.pageNum);
      this.fetchTableList();
    },
  },
};
</script>

<style scoped lang="scss">
@import "../../../assets/scss/span_color";

/deep/ .el-range-editor--medium .el-range-input {
  background-color: transparent;
  color: white;
}
/deep/ .el-table thead.is-group th {
  background-color: rgb(32, 67, 133);
  border-bottom: 1px solid #73d2ec;
}
</style>